
<!DOCTYPE html>
<html lang="zh">
<head>
    <th:block th:include="include :: header('新增爬虫任务')" />
    <th:block th:include="include :: jquery-steps-css" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: layerui-css" />
</head>
<style>

    .content{
        background: #fff;
    }
    .clearfix{
        background: #fff;
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox">
                <!--                <div class="ibox-title">-->
                <!--                    <h5>带验证的表单向导</h5>-->
                <!--                </div>-->
                <div class="ibox-content" >
                    <!--    <h2>
                           接下来请根据步骤创建爬虫任务
                        </h2>-->
                    <!--    <p>
                            下面这个示例展示了如何在表单向导中使用 jQuery Validation 插件
                        </p>-->

                    <form id="form" action="" class="wizard-big" >
                        <h1>基本信息</h1>
                        <fieldset >
                            <!--                            <h2>账户信息</h2>-->
                            <div class="row">
                                <div class="col-sm-8">
                                    <div class="form-group">
                                        <label>名称 *</label>
                                        <input id="userName" name="userName" type="text" class="form-control required">
                                    </div>
                                    <div class="form-group">
                                        <label>入口地址 *</label>
                                        <input id="password" name="password" type="text" class="form-control required">
                                    </div>
                                    <!--  <div class="form-group">
                                          <label>确认密码 *</label>
                                          <input id="confirm" name="confirm" type="text" class="form-control required">
                                      </div>-->
                                </div>
                                <div class="col-sm-4">
                                    <div class="text-center">
                                        <div style="margin-top: 20px">
                                            <i class="fa fa-sign-in" style="font-size: 180px;color: #e5e5e5 "></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </fieldset>
                        <h1>配置字段规则</h1>
                        <fieldset>
                            <!--                            <h2>配置字段规则</h2>-->
                            <div class="row">
                                <div class="col-sm-12">
                                    <button type="button" class="btn btn-white btn-sm" onclick="addColumn()"><i class="fa fa-plus"> 增加</i></button>
                                    <button type="button" class="btn btn-white btn-sm" onclick="sub.delColumn()"><i class="fa fa-minus"> 删除</i></button>
                                    <div class="col-sm-12 select-table table-striped">
                                        <table id="bootstrap-table"></table>
                                    </div>
                                    <div class="col-sm-12 select-table table-striped">
                                        <table id="bootstrap-table"></table>
                                    </div>
                                </div>
                            </div>
                        </fieldset>

                        <h1>警告</h1>
                        <fieldset>
                            <div class="text-center" style="margin-top: 120px">
                                <h2>你是火星人 :-)</h2>
                            </div>
                        </fieldset>

                        <h1>完成</h1>
                        <fieldset>
                            <h2>条款</h2>
                            <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required">
                            <label for="acceptTerms">我同意注册条款</label>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: jquery-steps-js" />
<th:block th:include="include :: layerui-js" />
<script th:src="@{/js/jquery.tmpl.js}"></script>
<script>





    $(document).ready(function () {
        // Initialize wizard
        $("#wizard").steps();
        $("#form").steps({
            bodyTag: "fieldset", onStepChanging: function (event, currentIndex, newIndex) {
                if (currentIndex > newIndex) {
                    return true
                }
                if (newIndex === 3 && Number($("#age").val()) < 18) {
                    return false
                }
                var form = $(this);
                if (currentIndex < newIndex) {
                    $(".body:eq(" + newIndex + ") label.error", form).remove();
                    $(".body:eq(" + newIndex + ") .error", form).removeClass("error")
                }
                form.validate().settings.ignore = ":disabled,:hidden";
                return form.valid()
            }, onStepChanged: function (event, currentIndex, priorIndex) {
                if (currentIndex === 2 && Number($("#age").val()) >= 18) {
                    $(this).steps("next")
                }
                if (currentIndex === 2 && priorIndex === 3) {
                    $(this).steps("previous")
                }
            }, onFinishing: function (event, currentIndex) {
                var form = $(this);
                form.validate().settings.ignore = ":disabled";
                return form.valid()
            }, onFinished: function (event, currentIndex) {
                var form = $(this);
                form.submit()
            }
        }).validate({
            errorPlacement: function (error, element) {
                element.before(error)
            }, rules: {confirm: {equalTo: "#password"}}
        });


        var options = {
            pagination: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            sidePagination: "client",
            columns: [{
                checkbox: true
            },
                {
                    field: 'index',
                    align: 'center',
                    title: "序号",
                    formatter: function (value, row, index) {
                        var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                        return columnIndex + $.table.serialNumber(index);
                    }
                },
                {
                    field: 'name',
                    align: 'center',
                    title: '商品名称',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='goods[%s].name' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'weight',
                    align: 'center',
                    title: '商品重量',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='goods[%s].weight' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'date',
                    align: 'center',
                    title: '商品日期',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='goods[%s].date' value='%s' placeholder='yyyy-MM-dd'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'price',
                    align: 'center',
                    title: '商品价格',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='goods[%s].price' value='%s'>", index, value);
                        return html;
                    }
                }]
        };
        $.table.init(options);

    });



    function addColumn() {
        var row = {
            name: "",
            weight: "",
            price: "",
            date: "",
            type: "",
        };
        sub.addColumn(row);
    }

    /* 主子表-提交 */
    function submitHandler(index, layero){
        var data = $("#form-add").serializeArray();
        $.operate.saveModal("/demo/operate/customer/add", data);
    }


</script>
</body>
</html>
